<template>
  <div style="height: 567px;width: 100%;background-color: #fcfcbc">


    <el-row>
      <el-col :span="10" style="padding: 20px">

        <el-upload
          class="avatar-uploader"
          action="/api/posts"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

      </el-col>

      <el-col :span="14" style="padding: 20px">

        <el-form :model="ownerForm" :rules="rules" ref="ownerForm" label-width="80px"
                 style="width: 300px;margin-top: 30px">

          <el-form-item label="业主ID" prop="id">
            <el-input v-model="ownerForm.ownerId"></el-input>
          </el-form-item>

          <el-form-item label="业主姓名" prop="name">
            <el-input v-model="ownerForm.ownerName"></el-input>
          </el-form-item>

          <el-form-item label="年龄" prop="age">
            <el-input v-model="ownerForm.ownerAge"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ownerForm.ownerSex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="ownerForm.ownerAddress"></el-input>
          </el-form-item>

        </el-form>

      </el-col>

    </el-row>

    <div style="margin-top: 50px">
      <el-button type="primary" @click="submitForm('ownerForm')">立即创建</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>


  </div>
</template>

<script>
export default {
  name: 'AddOwner',
  data() {
    return {
      imageUrl: '',
      ownerForm: {
        ownerId: '',
        ownerName: '',
        ownerAge: '',
        ownerSex: '',
        ownerAddress: '',
        image: null,
        carLicenseId: null,
        carParkingId: null
      },
      rules: {
        id: [
          {required: true, message: '请输入业主id', trigger: 'blur'},
          {min: 3, max: 8, message: '长度在 3 到 8个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入业主姓名', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入正确年龄', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择业主性别', trigger: 'change'}
        ],
        address: [
          {required: true, message: '请输入业主地址', trigger: 'blur'}
        ]

      }
    };
  },
  methods: {
    submitForm(formName) {
      //为表单提交绑定验证功能
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      this.$axios({
        url: '/owner/addOwner',
        method: "post",
        data: this.ownerForm
        // url: '/owner/addOwner',
        // params: {owner: this.ownerForm}
      }).then(() => {
        this.resetForm();
        alert('submit!');
        this.resetForm();
      })
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
    },
    resetForm() {
      this.ownerForm.ownerId = '';
      this.ownerForm.ownerName = '';
      this.ownerForm.ownerAge = '';
      this.ownerForm.ownerSex = '';
      this.ownerForm.ownerAddress = '';
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 200px;
  line-height: 200px;
}

.avatar {
  width: 150px;
  height: 200px;
  display: block;
}
</style>
